<template>
  <div class="container">
    <van-nav-bar title="材料确认" left-text="返回" right-text left-arrow @click-left="onClickLeft" fixed/>
    <div class="info">
      <div class="title">
        <div class="mark"></div>
        <div class="titleText">补充信息</div>
      </div>
      <div class="project" @click="showPiker">
        <div>
          <label>项目</label>
          <span>{{projectName}}</span>
        </div>
        <van-icon name="arrow"/>
      </div>
      <div class="note">
        <label>备注</label>
        <textarea placeholder="补充信息告知收单人员(可不填)" v-model="noteContent"></textarea>
      </div>
    </div>
    <div class="material">
      <div class="title">
        <div class="mark"></div>
        <div class="titleText">确认请购材料</div>
      </div>
      <div class="list">
        <div class="card" v-for="(item,index) in initData.goodslist" :key="index">
          <div class="name">{{item.material_name}}</div>
          <div class="row" v-for="(i,eq) in item.specificationsPO" :key="eq">
            <div class="left">{{i.specifications_name}}(￥{{i.price}})</div>
            <div class="right" @click="chnageNUm(item)">{{item.num}}{{item.unit}}</div>
            <div class="center" @click="del(item,i)">删除</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="left">选择
        <span>{{totalNum}}</span>项材料，共计：
        <span>￥{{totalPrice}}</span>
      </div>
      <div class="buy" @click="confirmSubmit">确认下单</div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker show-toolbar title :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
    </van-popup>
    <van-dialog v-model="isShow" :before-close="beforeClose" title="修改数量">
      <div class="type">
        <div class="left">DN-07</div>
        <div class="right">￥561.00</div>
      </div>
      <div class="num">
        <label>数量</label>
        <input type="text" v-model="num">
        <span>/米</span>
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default {
  name: "materialConfirm",
  data() {
    return {
      show: false,
      isShow: false,
      projectName: "请选择项目名称",
      columns: [],
      num: "",
      initData: {},
      totalNum: 0,
      totalPrice: 0.0,
      noteContent: "",
      changeNumData:'',
    };
  },
  mounted() {
    this.getInitData();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    showPiker() {
      this.show = true;
    },
    onConfirm(value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`);
      this.projectName = value;
      this.show = false;
    },
    onCancel() {
      // Toast('取消');
      this.show = false;
    },
    //修改数量
    async beforeClose(action, done) {
      if (action === "confirm") {
        let params = {
        Cat_id:this.changeNumData.cat_id,
        num:this.num
      };
      const res = await this.$axios.post(this.$api.update_cat, params);
      if (res.code == 1) {
       this.$toast("修改成功");
       this.isShow=false;
       this.getInitData();
      } else {
        this.$toast(res.msg);
      }
      } else {
        done();
      }
    },
    chnageNUm(item) {
      this.isShow = true;
        this.changeNumData=item;
        this.num=item.num;
    },
    //确认下单
    async confirmSubmit() {
      if (this.projectName == "请选择项目名称") {
        this.$toast("请选择项目名称");
        return false;
      }
      let params = {
        user_id: this.$cookies.get("user_id"),
        project_name: this.projectName,
        user_name: this.$cookies.get("user_name"),
        note: this.noteContent,
        // goods_id:
      };
      const res = await this.$axios.post(this.$api.add_order, params);
      if (res.code == 1) {
        this.$dialog.alert({
          title: "下单完成",
          message: "信息已上传管理后台，如有紧急情况，请电话与后台工作人员沟通"
        }).then(() => {
          this.$router.push('/index');
        });
      } else {
        this.$toast(res.msg);
      }
    },
    async getInitData() {
      let params = {
        user_id: this.$cookies.get("user_id")
      };
      const res = await this.$axios.post(this.$api.con_order, params);
      if (res.code == 1) {
        this.initData = res.data;
        this.initData.list.forEach((item, index) => {
          this.columns.push(item.project_name);
        });
        this.getTotal();
      } else {
        this.$toast(res.msg);
      }
    },
    //删除购物车
    async del(item, i) {
      let params = {
        Cat_id: item.cat_id
      };
      const res = await this.$axios.post(this.$api.delete_cat, params);
      if (res.code == 1) {
        this.$toast("删除成功");
        this.getInitData();
      } else {
        this.$toast(res.msg);
      }
    },
    //计算总价
    getTotal() {
      this.totalPrice = 0.0;
      this.totalNum = this.initData.goodslist.length;
      this.initData.goodslist.forEach((item, index) => {
        this.totalPrice += item.num * item.specificationsPO[0].price;
      });
    }
  }
};
</script>
<style scoped>
.container {
  padding-top: 0.46rem;
  padding-bottom: 0.6rem;
}
.title {
  width: 100%;
  height: 0.4rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.15rem;
  background: #cccccc;
}
.title .mark {
  width: 0.04rem;
  height: 50%;
  background: #56e519;
}
.title .titleText {
  font-size: 0.16rem;
  color: #333333;
  padding-left: 0.2rem;
}
.project {
  padding: 0 0.15rem;
  background: #fff;
  display: flex;
  align-items: center;
  height: 0.4rem;
  justify-content: space-between;
}
.project span {
  color: #999999;
  padding-left: 0.1rem;
  display: flex;
  align-items: center;
  background: #fff;
}
.project > div {
  display: flex;
  align-items: center;
}
.note {
  padding: 0.1rem 0.15rem;
  display: flex;
  background: #fff;
  margin-top: 1px;
}
.note textarea {
  border: none;
  padding-left: 0.1rem;
  width: 70%;
  height: 0.8rem;
}
.list {
  width: 100%;
}
.list .card {
  padding: 0.15rem;
  background: #fff;
  margin-bottom: 0.02rem;
}
.list .card .name {
  font-size: 0.14rem;
  color: #666666;
  margin-bottom: 0.1rem;
}
.list .card .row {
  width: 100%;
  margin-bottom: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666666;
  font-size: 0.12rem;
}
.list .card .row .right {
  color: #56e519;
}
.list .card .row .center {
  color: red;
}
.footer {
  width: 100%;
  height: 0.6rem;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
}
.footer .buy {
  width: 30%;
  height: 100%;
  background: #56e519;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer img {
  width: 0.18rem;
}
.footer .left {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 70%;
}
.footer .left span {
  color: #e59b4d;
}
.footer .left > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  color: #656565;
  font-size: 0.12rem;
}
.footer .left > div span {
  margin-top: 0.05rem;
}
.type {
  padding: 0.1rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num {
  padding: 0.1rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num input {
  border: 1px solid #eeeeee;
  height: 0.3rem;
  padding-left: 0.1rem;
}
</style>


